import HistoryList from './history-list'
import HistoryListLive from './history-list-live'
import styles from './index.module.scss'
import { useEffect, useState } from 'react'
import { dividerHistory } from '@/utils/utils'
import Null from '../null'
const Index = props => {
  const { playType, lData, vData, init } = props
  const [liveData, setLiveData] = useState([[], []])
  const [vodData, setVodData] = useState([], [])
  useEffect(() => {
    setLiveData(dividerHistory(lData))
  }, [lData])
  useEffect(() => {
    setVodData(dividerHistory(vData))
  }, [vData])
  return (
    <>
      {playType === 0 ? (
        <>
          {!vodData.length || (!vodData[0].length && !vodData[1].length) ? (
            <Null
              content={init ? '暂无点播观看历史' : '数据加载中...'}
              loginTxt="登录后才能查看点播观看历史哦~"
              style={{ marginTop: 100 }}
            />
          ) : (
            <>
              {vodData[0].length ? (
                <>
                  <div className={styles.weeks}>一周内</div>
                  <HistoryList content="暂无最近观看历史" data={vodData[0]} />
                </>
              ) : null}
              {vodData[1].length ? (
                <>
                  <div className={styles.weeks} style={{ margin: '16px 0 16px 0' }}>
                    更早
                  </div>
                  <HistoryList content="暂无更早观看历史" data={vodData[1]} />
                </>
              ) : null}
            </>
          )}
        </>
      ) : null}
      {playType === 1 ? (
        <>
          {!liveData.length || (!liveData[0].length && !liveData[1].length) ? (
            <Null content="暂无直播观看历史" loginTxt="登录后才能查看直播观看历史哦~" style={{ marginTop: 100 }} />
          ) : (
            <>
              {liveData[0].length ? (
                <>
                  <div className={styles.weeks} style={{ margin: '32px 0 16px 0' }}>
                    一周内
                  </div>
                  <HistoryListLive content="暂无最近观看历史" data={liveData[0]} />
                </>
              ) : null}
              {liveData[1].length ? (
                <>
                  <div className={styles.weeks} style={{ margin: '16px 0 16px 0' }}>
                    更早
                  </div>
                  <HistoryListLive content="暂无更早观看历史" data={liveData[1]} />
                </>
              ) : null}
            </>
          )}
        </>
      ) : null}
    </>
  )
}
export default Index
